<template>
  <div class="container">
    <el-col :md="8">
      <el-input v-model="search" placeholder="请输入关键字">
        <el-button :loading="searchLoading" slot="append" icon="el-icon-search" @click="toSearch" />
      </el-input>
    </el-col>
    <el-col
      :md="4"
      style="padding-right: 10px;float: right"
    >
      <el-button
        type="primary"
        plain
        icon="el-icon-picture"
        @click="open"
        >查看推荐景点</el-button
      >
    </el-col>
    <el-dialog
      :modal-append-to-body="false"
      title="著名景区"
      :visible.sync="isOpen"
      width="30%"
      center>
      <span>景点名称: &nbsp;&nbsp;{{travel.name}}</span><br><br>
      <span>省份: &nbsp;&nbsp;{{travel.province}}</span><br><br>
      <span>城市: &nbsp;&nbsp;{{travel.city}}</span><br><br>
      <span>内容: &nbsp;&nbsp;{{travel.content}}</span><br><br>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isOpen = false">取 消</el-button>
        <el-button type="primary" @click="isOpen = false">确 定</el-button>
      </span>
    </el-dialog>
    <dv-border-box-11 class="com-container" title="智慧城市">
      <div class="left-com">
        <airQuality ref='airQuality' :search = search />
        <!-- <briefing />
        <news /> -->
      </div>
      <div class="right-com">
        <oilPrice ref='oilPrice' :search = search />
        <!-- <travel />
        <headlines /> -->
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
import airQuality from './airQuality.vue'
import oilPrice from './oilPrice.vue'
// import travel from './travel.vue'
// import news from './news.vue'
// import briefing from './briefing.vue'
// import headlines from './headlines.vue'
export default {
  name: '',
  components: {
    airQuality,
    oilPrice
    // travel,
    // news,
    // briefing,
    // headlines
  },
  props: {},
  data () {
    return {
      search: '河北',
      searchLoading: false,
      isOpen: false,
      travel: {
        name: '',
        city: '',
        content: '',
        province: ''
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    toSearch () {
      console.log('搜索', this.search)
      this.$refs.oilPrice.getData()
      this.$refs.airQuality.getData()
    },
    open () {
      this.isOpen = !this.isOpen
      this.$axios.get(`http://api.tianapi.com/scenic/index?key=acc54cc8991613d1ef9f79b5b536b8f9&word=${this.search}`).then(res => {
        console.log('旅游景点', res)
        this.travel = res.data.newslist[0]
        // console.log('travel', this.travel)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.com-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between
}
.left-com {
  // width: 40%;
  float: left;
}
.right-com {
  // width: 40%;
  float: right;
}
</style>
